.rc-apps {
	&-settings {
		flex-direction: column;

		&__item {
			width: 100%;
			padding: 10px 0;
		}
	}

	&-container {
		display: flex;

		width: 100%;
		max-width: 705px;
		margin: auto;
		padding: 25px 0;

		padding-bottom: 25px;

		&__header {
			border-bottom: 1px solid #e1e1e1;
		}
	}

	&-details {
		display: flex;

		padding: 25px;

		&__photo {
			flex: 0 0 auto;

			width: 95px;
			height: 95px;

			border: 1px solid #f7f7f7;
			background-repeat: no-repeat;
			background-position: center center;

			background-size: contain;
		}

		&__content {
			display: flex;
			overflow: hidden;
			flex-direction: column;
			flex: 1 1 auto;

			padding: 0 15px;
			justify-content: space-between;
		}

		&__row {
			display: flex;
			align-items: flex-end;

			& button svg {
				margin: 0 5px 0 -5px;

				font-size: 18px;
			}

			h2 {
				padding: 5px 0;

				font-size: 18px;
			}
		}

		&__row + &__row {
			padding-top: 5px;
		}

		&__block {
			flex-direction: column;
			align-items: flex-start;
		}

		&__name {
			font-size: 24px;
		}

		&__version {
			color: var(--rc-color-primary-light);
		}

		&__author {
			font-weight: 500;
		}

		&__item {
			overflow: hidden;

			flex: 1 1 1px;

			white-space: nowrap;

			text-overflow: ellipsis;
		}

		&__api {
			padding-bottom: 10px;

			font-size: 18px;
			font-weight: bold;

			&__description {
				overflow-x: scroll;
				overflow-y: hidden;

				white-space: nowrap;

				background-color: #fafafa;

				font-size: 14px;

				&__item {
					display: table;

					padding: 10px;

					user-select: all !important;

					white-space: pre;

					border-top: 1px dashed #cccccc;

					line-height: 20px;

					&:first-child {
						border-top: none;
					}
				}
			}
		}
	}
}

@media (width <= 500px) {
	.rc-apps {
		&-container {
			flex-direction: column;

			padding: 25px;
			align-items: center;
		}

		&-details {
			&__item {
				text-align: center;
			}

			&__row {
				justify-content: center;
			}
		}
	}
}
